<template>
  <view class="box">
    <template v-if="math">
      <scroll-view scroll-x style="height: 100rpx;">
        <rich-text :nodes="renderedLatex" class="txt"></rich-text>
      </scroll-view>
    </template>
    <template v-else>
      公式正在渲染中...
    </template>
  </view>
</template>

<script>
// index.js
import parse from "@rojer/katex-mini";
export default {
  props: {
    math: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      renderedLatex: [], // 解析后的 HTML
    };
  },
  mounted() {
    this.renderLatex();
  },
  methods: {
    renderLatex() {
      try {
        // // 尝试解析数学公式
        // this.renderedLatex = katex.renderToString(this.math, {
        //   throwOnError: false,
        // });
        this.renderedLatex = parse(this.math, {
          displayMode: true,
          globalGroup: true,
          throwOnError: false
        });
        // 调用API接口
        // uni.request({
        //   url:'https://katex-mini-api.vercel.app',
        //   data:{
        //     latex: "a=b+c",
        //   },
        //   dataType: "json",
        //   success(res) {
        //     console.log(res);
        //     this.renderedLatex = res.data;
        //   },
        // })
      } catch (error) {
        console.error('Error rendering formula:', error);
        this.renderedLatex = [
          {
            name: "div",
            attrs: {
              style: "color: red;",
            },
            children: [
              {
                type: "text",
                text: "渲染错误",
              },
            ],
          },
        ];
        // 解析出错时的处理
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>